<template>
  <div class="complaint__detail">
    <u-nav-bar :title="'投诉详情'" :whiteStyle="true" />
    <div class="complaint__detail__ct">
      <div class="status">
        <span class="title">{{ status.text }}</span>
        <div class="img">
          <img v-if="StatusEm.WAIT.value === status.value" src="@/assets/image/mine/complaint/wait_detail.png" />
          <img
            v-else-if="StatusEm.FINISHED.value === status.value"
            src="@/assets/image/mine/complaint/finished_detail.png"
          />
          <img v-else src="@/assets/image/mine/complaint/cancel_detail.png" />
        </div>
      </div>
      <div class="list">
        <div class="item" :class="item.type" v-for="(item, index) in listMsg" :key="index" v-show="item.value">
          <div class="title">{{ item.title }}</div>
          <div class="description">{{ item.value }}</div>
        </div>
      </div>

      <div class="btn" v-show="StatusEm.WAIT.value === status.value" @click="onCancel">撤销投诉</div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'
import store from '@/store/index'
import NavBar from '@/components/NavBar.vue'
import { useRouter, useRoute } from 'vue-router'
import { StatusEm } from './utils/enums'
import { Toast } from 'vant'

type ListItem = {
  type: 'text' | 'textarea'
  value: string | number
  title: string
}

type ListMsgType = {
  billNo: ListItem
  name: ListItem
  mobile: ListItem
  remark: ListItem // 投诉描述
  complaintType: ListItem // 投诉类型
  [porpname: string]: ListItem
}

type StatusType = {
  text: string
  value: number | string
}

export default defineComponent({
  name: 'ComplaintDetail',
  components: {
    'u-nav-bar': NavBar
  },
  setup() {
    const router = useRouter()
    const route = useRoute()

    // 状态信息
    const status = reactive<StatusType>({
      text: '',
      value: ''
    })

    // 展示列表数据
    const listMsg = reactive<ListMsgType>({
      billNo: {
        type: 'text',
        title: '运单号',
        value: ''
      },
      name: {
        type: 'text',
        title: '投诉对象',
        value: ''
      },
      mobile: {
        type: 'text',
        title: '手机号',
        value: ''
      },
      complaintType: {
        type: 'text',
        title: '投诉类型',
        value: ''
      },
      remark: {
        type: 'textarea',
        title: '投诉描述',
        value: ''
      },
      resultRemark: {
        type: 'textarea',
        title: '投诉结果',
        value: ''
      }
    })

    const { id } = route.query

    // 获取详情信息
    const handleQueryData = async (): Promise<void> => {
      const result: any = await store.dispatch('complaint/handleTransportBillComplaintEetail', {
        id
      })
      if (result) {
        for (let attr in listMsg) {
          result[attr] && (listMsg[attr].value = result[attr])
        }
        for (let attr in StatusEm) {
          if (StatusEm[attr].value === result.status) {
            status.value = StatusEm[attr].value
            status.text = StatusEm[attr].description
          }
        }
      }
    }

    // 撤销投诉
    const onCancel = async (): Promise<void> => {
      const result = await store.dispatch('complaint/handleTransportBillComplaintRevoke', { id })
      if (result) {
        Toast.success('撤销成功')
        setTimeout(() => {
          router.go(-1)
        }, 2000)
      }
    }

    handleQueryData()

    return {
      listMsg,
      status,
      StatusEm,
      onCancel
    }
  }
})
</script>

<style lang="scss" scoped>
@import '@/style/variables.scss';
@import '@/style/mixins.scss';
.complaint__detail {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 100%;
  z-index: 100;
  @include flex-cloumn-width-height-100;
  background-color: $background-color-base;
  &__ct {
    @include flex-scroll-content-pd(24px 0px 0 0px);
    .status {
      width: 100%;
      height: 88px;
      background: #2791ff;
      box-shadow: 0px 2px 10px 0px rgba(93, 184, 255, 0.07);
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      padding: 0 28px 0 22px;
      .title {
        font-size: 18px;
        font-weight: 500;
        color: #ffffff;
      }
      .img {
        width: 58px;
        height: 58px;
        img {
          width: 100%;
        }
      }
    }
    .list {
      width: 350px;
      box-sizing: border-box;
      padding: 15px 10px;
      background: #ffffff;
      box-shadow: 0px 2px 10px 0px rgba(93, 184, 255, 0.07);
      border-radius: 10px;
      margin: -12px auto 50px auto;
      .item {
        display: flex;
        margin-bottom: 10px;
        .title,
        .desciption {
          font-size: 14px;
          font-weight: 400;
          color: #101736;
          line-height: 20px;
        }
      }
      .item:nth-last-child(1) {
        margin-bottom: 0;
      }
      .text {
        align-items: center;
        justify-content: space-between;
      }
      .textarea {
        flex-direction: column;
        .title {
          margin-bottom: 10px;
          width: 100%;
        }
        .description {
          width: 100%;
          min-height: 100px;
          background: rgba(159, 162, 175, 0.08);
          border-radius: 10px;
          border: 1px solid rgba(159, 162, 175, 0.2);
          box-sizing: border-box;
          padding: 10px;
        }
      }
    }
    .btn {
      width: 325px;
      height: 48px;
      background: linear-gradient(125deg, #74cdff 0%, #409eff 100%);
      border-radius: 6px;
      margin: 0 auto;
      font-size: 16px;
      font-weight: 500;
      color: #ffffff;
      text-align: center;
      line-height: 48px;
    }
  }
}
</style>
